<template>
    <div class="login">
        <div class="tel-wrapper" v-if="type==='tel'">
             <div class="title">手机号登录</div>
      <div class="country">
          <span>国家/地区</span>
          <span style="marginLeft:.5rem;color:#6bee68;">中国大陆（+86）</span>
      </div>
          <van-field v-model="tel" type="tel" label="手机号" clearable placeholder="请填写手机号" />
      <div class="otherLogin" @click="switchOther">用微信号/邮箱登录</div>
      <van-button type="primary" block :disabled='nextDisabled'>下一步</van-button>
        </div>
        <div class="other-wrapper" v-else>
            <div class="title">微信号/邮箱登录</div>
            <div class="form">
                 <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <van-field v-model="weNum" type="text" label="账号" clearable placeholder="请填写微信号/邮箱" />
                    <van-field 
                    v-model="pwd" 
                    type="password" 
                    label="密码" 
                    clearable 
                    placeholder="请填写密码" 
                    :rules="[{ pattern:checkpwd, message: '密码最少6位且包含数字大小写字母' }]"
                    />
                <div class="otherLogin" @click="switchTel">用手机号登录</div>
                <van-button type="primary" block :disabled='loginDisabled'>登录</van-button>
                 </van-form>
            </div>
        </div>
        <div class="bottom flex">
            <div class="van-hairline--right">找回密码</div>
            <div class="van-hairline--right" @click="toRegister">注册</div>
            <div>微信安全中心</div>
        </div>
    </div>
</template>
<script>
import {Meteor} from 'meteor/meteor';
import {user} from '../../../api/collections/index';
export default {
    data() {
        return {
            tel:'',
            weNum:'',
            pwd:'',
            nextDisabled:true,
            loginDisabled:true,
            type:'tel',
           checkpwd:/^(?=^.{6,}$)((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.*$/
        }
    },
    watch:{
        tel(){
            if(this.tel.trim().length>0){
                this.nextDisabled=false
            }else{
                this.nextDisabled=true
            }
        },
        weNum(){
            this.setLoginStatus()
        },
        pwd(){
            this.setLoginStatus()
        }
    },
    methods:{
        switchOther(){
            this.type='other'
            this.weNum=''
            this.pwd=''
        },
        switchTel(){
            this.type='tel'
            this.tel=''
        },
        setLoginStatus(){
            if(this.weNum.trim().length>0&&this.pwd.trim().length>0){
                this.loginDisabled=false
            }
            else{
                this.loginDisabled=true
            }
        },
        toRegister(){
            this.$router.push('/register')
        },
         onFailed(){
            this.$toast('内容出现错误，请修改后重试');
        },
        onSubmit(){
            Meteor.call('user.login',{
                weNum:this.weNum,
                password:this.pwd
            },(err,res)=>{
                if(err){
                    this.$toast(err.error)
                }
                else{
                    if(res){
                    sessionStorage.setItem('user',res._id)
                    this.$router.push('/home')
                    }
                    else{
                        this.$toast.fail('账号或密码出现错误，请重试')
                    }
                }
            })
        }
    }
}
</script>
<style scoped>
.van-field{
    background: none;
}
.login{
    padding:.5rem ;
    background-color: #fff;
    height: 100vh;
}
.title{
    margin-top: 2rem;
    font-size: .8rem;
    font-weight: 700;
}
.country{
    margin-top: 1.5rem;
    margin-bottom: .7rem;
}
.country span{
    font-size: .7rem;
}
.form{
    margin-top: 1.5rem;
}
.otherLogin{
   font-size: .6rem; 
   margin-top: .5rem;
   color: royalblue;
}
.van-button{
    margin-top: 1rem;
}
.bottom{
    position: absolute;
    bottom: .5rem;
    left: 0;
     justify-content: center;
     font-size: .6rem;
     width: 100%;
     padding:0 2rem;
     box-sizing: border-box;
     color: royalblue;
     text-align: center;
}
.bottom>div{
   flex: 1;
   text-align: center;
}
</style>